<%@page import="model.Question"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model.Theme"%>
<%@page import="model.PublicUser"%>
<!DOCTYPE html>
<html>
    <head>
        <title>IEPM</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <%@include file = "global/include.jsp" %>
        <script type="text/javascript" src="js/toolTip/jquery.tooltip.js"></script>
        <%

            try {
                session.getAttribute("PublicUser");
            } catch (Exception ex) {
                RequestDispatcher dispatcher;
                ServletContext servletContext = getServletContext();
                dispatcher = servletContext.getRequestDispatcher("index.jsp");
                if (dispatcher == null) {
                    dispatcher = servletContext.getRequestDispatcher("error");
                }

                dispatcher.forward(request, response);
            }
        %>




        <% ArrayList<Question> qns = (ArrayList<Question>) session.getAttribute("questionList");%>
        <script type="text/javascript">
            window.history.forward();
            function noBack(){ window.history.forward(); }

            $(document).ready(function(){ 
                $('#err').hide();
                
                
                
            <% for (int i = 0; i < qns.size(); i++) {%>
                    $('#tip_<%=(i + 1)%>1').tooltip({ 
                        delay: 0, 
                        showURL: false, 
                        bodyHandler: function() { 
                            return 'Strongly Disagree'; 
                        } 
                    });

                    $('#tip_<%=(i + 1)%>2').tooltip({ 
                        delay: 0, 
                        showURL: false, 
                        bodyHandler: function() { 
                            return 'Disagree'; 
                        } 
                    });

                    $('#tip_<%=(i + 1)%>3').tooltip({ 
                        delay: 0, 
                        showURL: false, 
                        bodyHandler: function() { 
                            return 'Neutral'; 
                        } 
                    });

                    $('#tip_<%=(i + 1)%>4').tooltip({ 
                        delay: 0, 
                        showURL: false, 
                        bodyHandler: function() { 
                            return 'Agree'; 
                        } 
                    });

                    $('#tip_<%=(i + 1)%>5').tooltip({ 
                        delay: 0, 
                        showURL: false, 
                        bodyHandler: function() { 
                            return 'Strongly Agree'; 
                        } 
                    });
            <% }%>
                    $('#loadingDialog').dialog({
                        autoOpen: false,
                        width: 400,
                        height: 200,
                        modal: true
                    });
                });
            
            
            
                function onClickSubmit(){    
                    var valid =true;
            
            <% for (int i = 0; i < qns.size(); i++) {%>
                    var a= $('input:radio[name=qns_<%=((Question) qns.get(i)).getId()%>]:checked').val();
                    if(a==null){
                        $("#qnsTxt<%=((Question) qns.get(i)).getId()%>").css("color","red");
                        valid=false;
                    }else{
                        $("#qnsTxt<%=((Question) qns.get(i)).getId()%>").css("color","black");
                    }
            <% }%>
                
                    if(valid==true){
                        $('#form3').submit(); 
                    }else{
                        $('#err').show();
                    }
                }   
                
                $(function(){
                    $('#form3').form({ 
                        onSubmit:function(){   
                            //$('#loadingDialog').dialog('option', 'position', 'center');
                            
                            $('#loadingDialog').dialog('open');
                            
                            
                            return $(this).form('validate');
                        },
                        success:function(data){
                            window.open("registration.jsp","_self");
                        }
                    });
                });
        </script>
    </head>
    <body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
        <div id="centerColumn" class="ui-widget ui-widget-content ui-corner-all">
            <%@include file = "global/header.jsp" %>
            <!--//Your Content//-->
            <div style=" position:relative; left:9%;">
                <ul class="steps">
                    <li class="prevDone"><span>1</span>Step 1</li>
                    <li class="prevDone"><span>2</span>Step 2</li>
                    <li class="current"><span>3</span>Step 3</li>
                </ul>
                <br class="clear" />
            </div>
            <h2 title="Survey Questions" class="reflected">Survey Questions</h2>
            <br/>
            <br/>
            <form id="form3" action="FrontEndServlet?action=proceedToEnd" method="post">
                <center>
                    <table id="matrix">
                        <tbody>
                            <tr>
                                <td class="matrixTitle">No.</td>
                                <td class="matrixTitle">Questions</td>
                                <td class="matrixTitle">Strongly<br/>Disagree</td>
                                <td class="matrixTitle">Disagree</td>
                                <td class="matrixTitle">Neutral</td>
                                <td class="matrixTitle">Agree</td>
                                <td class="matrixTitle">Strongly<br/>Agree</td>
                            </tr>
                            <% for (int i = 0; i < qns.size(); i++) {%>
                            <tr id="radio<%=i%>">
                                <td><%=(i + 1)%>.</td>
                                <td style="text-align: left;" >
                                    <span id="qnsTxt<%=((Question) qns.get(i)).getId()%>"><%=((Question) qns.get(i)).getQuestion()%></span>
                                </td>
                                <td>
                                    <span id="tip_<%=(i + 1)%>1"><input type="radio" id="radio<%=i%>1" value="1" name="qns_<%=((Question) qns.get(i)).getId()%>" /></span>
                                </td>
                                <td>
                                    <span id="tip_<%=(i + 1)%>2"><input type="radio" id="radio<%=i%>2" value="2" name="qns_<%=((Question) qns.get(i)).getId()%>" /></span>
                                </td>
                                <td>
                                    <span id="tip_<%=(i + 1)%>3"><input type="radio" id="radio<%=i%>3" value="3" name="qns_<%=((Question) qns.get(i)).getId()%>" /></span>
                                </td>
                                <td>
                                    <span id="tip_<%=(i + 1)%>4"><input type="radio" id="radio<%=i%>4" value="4" name="qns_<%=((Question) qns.get(i)).getId()%>" /></span>
                                </td>
                                <td>
                                    <span id="tip_<%=(i + 1)%>5"><input type="radio" id="radio<%=i%>5" value="5" name="qns_<%=((Question) qns.get(i)).getId()%>" /></span>
                                </td>
                            </tr>
                            <% }%>
                        </tbody>
                    </table>
                </center>
                <br/>
                <br/>
                <div id="err" class="ui-widget">
                    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
                        <p>
                            <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .7em;"></span> 
                            <strong>Error:</strong> Questions not completed!
                        </p>
                    </div>
                    <br/>
                </div>
                <div style=" text-align: center ">
                    <input onclick="onClickSubmit()" type="button" id="inputButton" value="End" />
                </div>
            </form>
            <%@include file = "global/footer.jsp" %>
        </div>
        <!--//end #centerColumn//-->
        <div id="loadingDialog" name="loadingDialog" style="
             text-align: center" title="Generating Report">
            <img src="css/img/loading.gif" alt="loading"/>   
        </div>
    </body>
</html>
